<template>
  <iconfont
    name="#icon-tianjiabiaoqian"
    @click="showDrawer"
    style="cursor: pointer; font-size: 24px"
    :style="query?.tags?.length > 0 ? { fill: '#3d6d99' } : {}"
  />
  <a-drawer :width="490" v-model:open="open" placement="right">
    <template #title> 添加标签 </template>
    <search-tag-drawer-content @change="onChange" />
    <template #footer>
      <div style="text-align: right">
        <a-space>
          <a-button type="primary" @click="onSubmit"> 确定 </a-button>
          <a-button @click="onClose">取消</a-button>
        </a-space>
      </div>
    </template>
  </a-drawer>
</template>
<script setup>
import { ref } from 'vue'
import iconfont from '@/components/iconfont.vue'
import SearchTagDrawerContent from './search-tag-drawer-content.vue'
import { useQuery, useDataSourceManager } from './provide-context.js'

/**
 * 全局
 */
let query = useQuery()
let { update } = useDataSourceManager()

/**
 * 抽屉相关
 */
let open = ref(false)
let showDrawer = () => {
  open.value = true
}
function onClose() {
  open.value = false
}
function onSubmit() {
  open.value = false
  query.value.tags = (tags.value?.person?.selected || []).map(({ key }) => key)
  update()
}
/**
 * 标签数据
 */
let tags = ref([])
function onChange(info) {
  tags.value = info
}
</script>
<style scoped lang="less"></style>
